<template>
    <div class="organization-tree-box">
        <div class="head">
            <span>组织机构树</span>
            <el-button @click="editType='add';editNode=null;dialogVisible=true" type="primary">添加根机构</el-button>
        </div>
        <div>

            <el-tree
                class="tree-box"
                @click="showEdit = false;"
                ref="treeRef"
                node-key="key"
                :props="{
                    'label':'title'
                }"
                :expand-on-click-node="false"
                :data="organizations"
                :default-expanded-keys="expandKeys"
                @node-expand="nodeExpand"
                @node-collapse="nodeCollapse"
                @node-click="nodeClick"
                @node-contextmenu="nodeContextmenu"
            />


        </div>
        <OrganizationDialog @hanldeRequest="getUnits" :type="editType" :editNode="editNode" v-model:dialogVisible="dialogVisible"/>
        <Teleport to="body">
            <EditPop @itemClick="editClick" v-show="showEdit" :positionInfo="positionInfo"/>
        </Teleport>
    </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import OrganizationDialog from './OrganizationDialog.vue'
import EditPop from './EditPop.vue'
import {organizationUnitsTree,organizationUnitsDelete} from "@/api/organizationUnits"
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
  name: "OrganizationTree",
});
const emit = defineEmits(['nodeClick']);
const showEdit = ref(false);
const editNode = ref(null);
const editType = ref('add');
const positionInfo = ref({left:0,top:0})
const dialogVisible = ref(false);
const organizations = ref([]);
const expandKeys = ref([]);
const treeRef = ref(null);
async function getUnits() {
  const res = await organizationUnitsTree()
  organizations.value = res;
}
function nodeContextmenu(a,b,c,d) {
  console.log('a',a,b,c,d)
  positionInfo.value.left = a.pageX;
  positionInfo.value.top = a.pageY;
  editNode.value = b;

  showEdit.value = true;

}

function nodeExpand(data) {
  if(!expandKeys.value.find(_key => _key === data.key)) {
    expandKeys.value.push(data.key)
  }

}

function nodeCollapse(data) {
  expandKeys.value = expandKeys.value.filter(_key => _key !== data.key)
}

function nodeClick(data) {
  showEdit.value = false
  emit('nodeClick',data.key)
}


function toggleShow() {
  showEdit.value = false;
}


function editClick(name) {
  if(name === '新增') {
    dialogVisible.value = true;
    editType.value = 'add';
  }else if(name === '编辑') {
    dialogVisible.value = true;
    editType.value = 'edit';
  }else if(name === '删除') {


    ElMessageBox.confirm(
      '是否删除?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
    )
      .then(async () => {

        await organizationUnitsDelete({id:editNode.value.key})
        ElMessage({
          type: 'success',
          message: 'Delete completed',
        })
        getUnits()
      })


  }
}
window.addEventListener("click", toggleShow);
getUnits()
</script>

<style lang="scss" scoped>
.organization-tree-box {
  >.head {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--el-border-color);;
  }

  :deep(.tree-box){
    .is-current {
      >.el-tree-node__content {
       background-color: #f5f7fa;
      }

    }
  }
}
</style>